<script>
import ReviewApi from '../../api/review';
import { mapStores } from 'pinia';
import { useUserStore } from '../../stores/user';

export default {
    data() {
        return {
            myReviewList: [],
            total: 0,
            pageSize: 7,
            curPage: 0,
            limit: -1,
            offset: -1,
            editIndex: -1,
            editData: {},
            deleteIndex: -1
        }
    },
    methods: {
        async getReviewList(limit = -1, offset = -1) {
            try {
                let orderBy = "created_time";
                let sort = "DESC";
                const api = new ReviewApi();
                let res = await api.findAllByUser(this.userStore.userData.userId, limit, offset, orderBy, sort);
                this.myReviewList = res.data;
                console.log(this.myReviewList);
            } catch (err) {
                console.error(err);
                this.$myMessageBox("应用服务器访问错误！");
            }
        },
        async getCount() {
            try {
                const api = new ReviewApi();
                let res = await api.getCountByUserId(this.userStore.userData.userId);
                this.total = res.data.total;
                console.log(this.total);
            } catch (err) {
                console.error(err);
                this.$myMessageBox("应用服务器访问错误！");
            }
        },
        goto(page) {
            this.curPage = page;
            this.offset = (page - 1) * this.pageSize;
            this.getReviewList(this.limit, this.offset);
        },
        setEditor(review, index) {
            this.editIndex = index;
            this.editData = JSON.stringify(review);
        },
        isEdit(index) {
            return this.editIndex === index;
        },
        cancelSave(review) {
            this.editIndex = -1;
            let originEditData = JSON.parse(this.editData);
            review.title = originEditData.title;
            review.content = originEditData.content;
        },
        async doSave(review) {
            try {
                const api = new ReviewApi();
                let res = await api.edit(review);
                if (res.code === 200) {
                    this.editIndex = -1;
                }
            } catch (err) {
                console.error(err);
                this.$myMessageBox("应用服务器访问错误！");
            }
        },
        setDelete(index) {
            this.deleteIndex = index;
        },
        isDelete(index) {
            return this.deleteIndex === index;
        },
        cancelDelete() {
            this.deleteIndex = -1;
        },
        async doDelete(review) {
            try {
                const api = new ReviewApi();
                let res = await api.delete(review.id);
                if (res.code === 204) {
                    this.deleteIndex = -1;
                    this.myReviewList = this.myReviewList.filter(item => item.id !== review.id);
                }
            } catch (err) {
                console.error(err);
                this.$myMessageBox("应用服务器访问错误！");
            }
        }
    },
    computed: {
        ...mapStores(useUserStore),
        updatedTime() {
            return (time) => {
                return new Date(time).toLocaleDateString();
            };
        }
    },
    async mounted() {
        this.curPage = 1;
        this.limit = this.pageSize;
        this.offset = 0;
        await this.getCount();
        await this.getReviewList(this.limit, this.offset);
    },
}
</script>

<template>
    <div class="my-review-list w80">
        <ul>
            <li>
                <span class="index">序号</span>
                <span class="book-title">书籍名称</span>
                <span class="title">评论标题</span>
                <span class="content">评论内容</span>
                <span class="time">发表时间</span>
                <span class="action">&nbsp;</span>
            </li>
            <li v-for="(review, index) in myReviewList" :key="review.id">
                <span class="index">{{ index + 1 }}</span>
                <span class="book-title">{{ review.bookTitle }}</span>
                <span class="title">
                    <template v-if="isEdit(index)">
                        <input type="text" v-model="review.title">
                    </template>
                    <template v-else>{{ review.title }}</template>
                </span>
                <span class="content">
                    <template v-if="isEdit(index)">
                        <textarea rows="5" v-model="review.content"></textarea>
                    </template>
                    <template v-else>{{ review.content }}</template>
                </span>
                <span class="time">{{ updatedTime(review.updatedTime) }}</span>
                <span class="action">
                    <template v-if="isEdit(index)">
                        <button @click="doSave(review)">保存</button>
                        <button @click="cancelSave(review)">取消</button>
                    </template>
                    <template v-if="isDelete(index)">
                        <button @click="doDelete(review)">确认</button>
                        <button @click="cancelDelete()">取消</button>
                    </template>
                    <template v-else>
                        <button @click="setEditor(review, index)">编辑</button>
                        <button @click="setDelete(index)">删除</button>
                    </template>
                </span>
            </li>
        </ul>
        <my-pagination :total="total" :page-size="pageSize" :cur-page="curPage" :show-info="true" @goto="goto" />
    </div>
</template>

<style scoped>
.my-review-list {
    margin-bottom: 16px;
}

ul {
    margin-bottom: 8px;
}

li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 3px;
}

li:first-of-type {
    background-color: rgb(72, 72, 252);
    color: white;
}

li.data-list:nth-of-type(2n + 1) {
    background-color: #fff8f8;
}

li.data-list:nth-of-type(2n) {
    background-color: #f3f3ff;
}

li.data-list:hover {
    background-color: #9de094;
    cursor: pointer;
}

span {
    display: inline-block;
    padding: 8px;
}

.index {
    flex: 0 0 40px;
    text-align: center;
}

.book_title {
    flex: 1 0 auto;
}

.title {
    flex: 2 1 auto;
}

.content {
    flex: 2 1 auto;
}

.time {
    flex: 0 0 160px;
    text-align: center;
}

.action {
    flex: 0 0 120px;
    text-align: center;
}
</style>
